<template>
  <div class="m-4">
    <el-cascader v-model="value" :options="options" @change="handleChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])

const props = {
  expandTrigger: 'hover' as const,
}

const handleChange = (value:any) => {
  console.log(value)
}

const options = [
  {
    value: 'guide',
    label: '本地执行',
    children: [
      {
        value: 'disciplines',
        label: '目标环境',
        children: [
          {
            value: '',
            label: '输入CPU个数',
          },
          {
            value: 'feedback',
            label: '磁盘大小',
          },
          {
            value: 'efficiency',
            label: '内存大小',
          }
        ],
      }
    ],
  },
  {
    value: 'navigation',
    label: '远程执行',
    children: [
      {
        value: 'side nav',
        label: 'POC/EXP运行环境',
        children: [
          {
            value: 'efficiency',
            label: '输入CPU个数',
          },
          {
            value: 'efficiency',
            label: '内存大小',
          },
          {
            value: 'efficiency',
            label: '磁盘大小',
          }
        ]
      },
      {
        value: 'top nav',
        label: '目标环境',
        children: [
          {
            value: 'efficiency',
            label: '输入CPU个数',
          },
          {
            value: 'efficiency',
            label: '内存大小',
          },
          {
            value: 'efficiency',
            label: '磁盘大小',
          }
        ]
      }
    ],
  }
]
</script>

<style>
.m-4 {
  padding: 20px;
}
</style>